<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
        }

        .box {
            width: 560px;
            height: 400px;
            margin: auto;
        }

        img {
            width: 100%;
            height: 320px;
            display: block;
        }

        .box1 {
            height: 80px;
            background-color: aqua;
            padding: 10px 10px 0 10px;
        }

        .box1 p {
            margin: 0;
            color: aliceblue;
            margin-bottom: 10px;
        }

        ul {
            width: 150px;
            display: flex;
            justify-content: space-between;
            list-style: none;
            margin: 0;
            padding: 0;
            align-items: center;
        }

        ul li {
            width: 8px;
            height: 8px;
            margin: 4px;
            border-radius: 50%;
            opacity: 0.4;
            cursor: pointer;
            background: #fff;
        }

        li.lihover {
            width: 12px;
            height: 12px;
            opacity: 1;
        }

        button{
            float: right;
        }
       
    </style>
</head>

<body>
    <div class="box">
        <img src="./../../images/course01.png" alt="">

        <div class="box1">
            <p>对人类来说会不会太超前了</p>
           
                <button class="btn1">左</button>
                <button class="btn2">右</button>
            
            <ul>
                <li class="lihover"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <script>
        const sliderData = [
            { url: './../../images/course01.png', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
            { url: './../../images/course02.png', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
            { url: './../../images/course03.png', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
            { url: './../../images/course04.png', title: '快来分享你的寒假日常吧~', color: 'rgb(139, 98, 66)' },
            { url: './../../images/course05.png', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(67, 90, 92)' },
            { url: './../../images/course06.png', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
            { url: './../../images/course07.png', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
            { url: './../../images/course08.png', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
        ]
        const img = document.querySelector('img')
        const p = document.querySelector('p')
        const bc = document.querySelector('.box1')
        const btn1 = document.querySelector('.btn1')
        const btn2 = document.querySelector('.btn2')
        let i = 4
        btn1.addEventListener('click', function () {
            i--
            img.src = sliderData[i].url
            p.innerHTML = sliderData[i].title
            bc.style.backgroundColor = sliderData[i].color
            if (i <= 0) {
                i = 8
            }
            //删除小圆点
            const lis = document.querySelector(`ul .lihover`)
            lis.classList.remove('lihover')
            //增加小圆点
            const li = document.querySelector(`li:nth-child(${i + 1})`)
            li.classList.add('lihover')
        })
        btn2.addEventListener('click', function () {
            i++
            img.src = sliderData[i].url
            p.innerHTML = sliderData[i].title
            bc.style.backgroundColor = sliderData[i].color
            if (i >= 8) {
                i = 0
            }
            //删除小圆点
            const lis = document.querySelector(`ul .lihover`)
            lis.classList.remove('lihover')
            //增加小圆点
            const li = document.querySelector(`li:nth-child(${i + 1})`)
            li.classList.add('lihover')
        })
        bc.addEventListener('mouseenter', function () {

        })
        bc.addEventListener('mouseleave', function () {

        })


        // setInterval(function () {
        //     i++
        //     if (i >= sliderData.length) {
        //         i = 0
        //     }

        //     img.src = sliderData[i].url
        //     p.innerHTML = sliderData[i].title
        //     bc.style.backgroundColor = sliderData[i].color
        //删除小圆点
        const lis = document.querySelector(`ul .lihover`)
        lis.classList.remove('lihover')
        //增加小圆点
        const li = document.querySelector(`li:nth-child(${i + 1})`)
        li.classList.add('lihover')

        // }, 1000)



    </script>
</body>

</html>